<template>
  <div class="currency-card">
    <div class="label">软妹币（个）</div>
    <div class="num">{{ gold }}</div>
    <div class="bottom flex">
      <n-button
        style="--n-padding: 0"
        class="recharge-btn btn-round"
        type="primary"
        round
        ghost
        @click="handRecharge"
      >
        立即充值
      </n-button>
      <n-button class="log-btn btn-round" round quaternary @click="handDetail">
        消费明细
      </n-button>
    </div>
    <recharge-dia ref="rechargeRef" />
  </div>
</template>
<script setup lang="ts">
import { NButton } from 'naive-ui'
import RechargeDia from '@/components/RechargeDia.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
type PropsState = {
  gold: number
}
withDefaults(defineProps<PropsState>(), {
  gold: 0
})
const rechargeRef = ref()
const router: any = useRouter()
const handRecharge = () => {
  rechargeRef.value.open()
}
const handDetail = () => {
  router.push('/my/download')
}
</script>

<style scoped lang="scss">
.currency-card {
  flex: 1;
  background: #ffffff;
  border-radius: 12px;
  opacity: 1;
  border: 1px solid #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0;
  .label {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .num {
    margin-top: 20px;
    font-size: 30px;
    font-family: HONOR Sans, HONOR Sans;
    font-weight: 600;
    color: #333333;
  }
  .bottom {
    margin-top: 30px;
    .recharge-btn {
      width: 90px;
      height: 30px;
      font-size: 13px;
    }
    .log-btn {
      width: 90px;
      margin-left: 10px;
      font-size: 13px;
      height: 30px;
      padding: 0;
    }
  }
}
</style>
